<template>
    <div>
      <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>人员账号管理</template>
            <el-menu-item-group>
              <template slot="title">管理员</template>
              <el-menu-item index="1-1" @click="getPage(1,12,'getRoots')">管理员账号管理</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="客户">
              <el-menu-item index="1-3" @click="getPage(1,12,'getClientele')">客户账号管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>游戏相关管理</template>
            <el-menu-item index="2-1" @click="getPage(1,12,'getGameCategory')">游戏类型管理</el-menu-item>
            <el-menu-item index="2-2" @click="getPage(1,12,'getGames')">游戏管理</el-menu-item>
            <el-menu-item index="2-3" @click="getPage(1,12,'getGameSpecification')">游戏规格管理</el-menu-item>
            <el-menu-item index="2-4" @click="getPage(1,12,'orderShow')">用户订单查看</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting"></i>其他设置</template>
            <el-menu-item index="3-1" @click="getOthers('showSet')">首页轮播图管理</el-menu-item>
            <el-menu-item index="3-2" @click="getOthers('discountManage')">活动折扣管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container direction="vertical">
        <BaseHead/>
        <router-view></router-view>
      </el-container>
    </el-container>
    </div>
</template>
<script>
import BaseHead from './BaseHead.vue';
    export default {
        name: 'BaseMenu',
        components:{BaseHead},
        methods:{
          getPage(page,pageSize,name){
            this.$router.replace({
              name,
              params:{
                page,
                pageSize,
              }
            });
          },
          getOthers(name){
            this.$router.push({
              name,
            });
          }
        }
    }
</script>

<style scoped>
    .el-aside {
        color: #333;
    }
</style>